<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="root">
    <p>person: {{person}}</p>
    <button @click="updateP">更新人</button>
    <button @click="updateP2">更新人2</button>
  </div>
  <script>
    new Vue({
      el: '#root',
      data: {
        person: {
          name: 'tom',
          age: 12
        }
      },

      methods: {
        updateP () {
          this.person = {
            name: 'A',
            age: 13
          }
        },
        updateP2 () {
          this.person.name = 'C'
          this.person.age = 23
        }
      },

      watch: {
        person: {
          handler (value) { // 数据发生变化后调用
            console.log('watch person', value)
            localStorage.setItem('person_key', JSON.stringify(value))
          },
          immediate: true, // 初始化时就执行第一次
          deep: true, // 深度监听, 不仅监视本身的变化, 还监视内部数据的变化
        }
      }
    })
  </script>
</body>
</html>